<!-- 功能分组-公共组件  目录组件 最多支持三级-->
<template>
  <div class="les-cata">
    <template v-if="type === '1'">
      <div class="level_1">
        <div class="title" v-for="(item) in data" :key="item.id">
          <span class="cross-line"></span>
          <div class="level_2_fir">
            <!-- 一级栏目 -->
            <div class="cata-header">
              <div class="header-icon">
                <img class="big-circle" :src="circle" alt />
              </div>
              <div
                class="level_2_title van-ellipsis"
                :class="{active: item.id === activeCatalogue}"
                @click="onSelectItem(item)"
              >
                <span class="lev1-text van-ellipsis">{{ item.label }}</span>
              </div>
              <div class="studyContainer">
                <div class="study" :class="{'active-wrap': item.id === activeCatalogue}" @click.stop="onSelectItem(item)">
                  <template v-if="item.duration === 100">
                    <span class="complete">已学习</span>
                  </template>
                  <template v-else-if="item.duration === 50">
                    <span class="underway">进行中</span>
                  </template>
                  <template v-else>
                    <span v-if="item.id === activeCatalogue" class="levelTitle_study">正在学</span>
                    <span v-else class="levelTitle_study">去学习</span>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <template v-if="type === '2'">
      <div class="level_2">
        <div class="title" v-for="(item) in data" :key="item.id">
          <span class="cross-line"></span>
          <div class="level_2_fir">
            <!-- 一级栏目 -->
            <div class="cata-header">
              <div class="header-icon">
                <template v-if="isFolder(item)">
                  <yj-mob-image
                    class="foldericon"
                    @click="makeFolder(item)"
                    v-show="item.isOpen"
                    :src="openIcon"
                  />
                  <yj-mob-image
                    class="foldericon"
                    @click="makeFolder(item)"
                    v-show="!item.isOpen"
                    :src="unOpenIcon"
                  />
                </template>
                <img v-else class="big-circle" :src="circle" alt />
                <!-- <span ></span> -->
              </div>
              <div
                class="level_2_title van-ellipsis"
                :class="{active: item.id === activeCatalogue}"
                @click="onSelectItem(item)"
              >
                <span class="lev1-text van-ellipsis">{{ item.label }}</span>
              </div>
              <div class="studyContainer">
                <div class="study" :class="{'active-wrap': item.id === activeCatalogue}" @click.stop="onSelectItem(item)" v-if="!item.hasChild">
                  <template v-if="item.duration === 100">
                    <span class="complete">已学习</span>
                  </template>
                  <template v-else-if="item.duration === 50">
                    <span class="underway">进行中</span>
                  </template>
                  <template v-else>
                    <span v-if="item.id === activeCatalogue" class="levelTitle_study">正在学</span>
                    <span v-else class="levelTitle_study">去学习</span>
                  </template>
                </div>
              </div>
            </div>
            <!-- 二级显示 -->
            <div v-show="item.isOpen" v-if="isFolder(item)" class="sub-content">
              <div v-for="(subItem, subItemIndex) in item.children" :key="subItem.id">
                <div class="sub-content-item">
                  <div class="header-icon">
                    <template v-if="isFolder(subItem)">
                      <yj-mob-image
                        class="foldericon"
                        @click="makeFolder(subItem)"
                        v-show="subItem.isOpen"
                        :src="openIcon"
                      />
                      <yj-mob-image
                        class="foldericon"
                        @click="makeFolder(subItem)"
                        v-show="!subItem.isOpen"
                        :src="unOpenIcon"
                      />
                    </template>
                    <img v-else class="middle-circle" :src="circle" alt />
                    <!-- <span v-else class="middle-circle"></span> -->
                  </div>
                  <div
                    class="subTitle van-ellipsis"
                    @click="onSelectItem(subItem)"
                    :class="{active: subItem.id === activeCatalogue, subTitlePadBom: subItemIndex !== (item.children.length - 1)}"
                  >
                    <span class="lev1-text van-ellipsis">{{ subItem.label }}</span>
                  </div>
                  <div class="studyContainer">
                    <div class="study" :class="{'active-wrap': subItem.id === activeCatalogue}" v-if="!subItem.hasChild" @click.stop="onSelectItem(subItem)">
                      <template v-if="subItem.duration === 100">
                        <span class="complete">已学习</span>
                      </template>
                      <template v-else-if="subItem.duration === 50">
                        <span class="underway">进行中</span>
                      </template>
                      <template v-else>
                        <span v-if="subItem.id === activeCatalogue" class="levelTitle_study">正在学</span>
                        <span v-else class="levelTitle_study">去学习</span>
                      </template>
                    </div>
                  </div>
                </div>
                <!-- 三级显示 -->
                <div v-show="subItem.isOpen" v-if="isFolder(subItem)" class="sub-sub-content">
                  <div v-for="(subsubItem) in subItem.children" :key="subsubItem.id">
                    <div class="sub-sub-content-item">
                      <div class="header-icon">
                        <img class="small-circle" :src="circle" alt />
                        <!-- <span class="small-circle"></span> -->
                      </div>
                      <p
                        class="subsubTitle van-ellipsis"
                        @click="onSelectItem(subsubItem)"
                        :class="{active: subsubItem.id === activeCatalogue, subTitlePadBom: subItemIndex !== (item.children.length - 1)}"
                      >
                        <span class="lev1-text van-ellipsis">{{ subsubItem.label }}</span>
                      </p>
                      <!-- v-if="!subsubItem.hasChild" -->
                      <div class="study" :class="{'active-wrap': subsubItem.id === activeCatalogue}" @click.stop="onSelectItem(subsubItem)">
                        <template v-if="subsubItem.duration === 100">
                          <span class="complete">已学习</span>
                        </template>
                        <template v-else-if="subsubItem.duration === 50">
                          <span class="underway">进行中</span>
                        </template>
                        <template v-else>
                          <span v-if="subsubItem.id === activeCatalogue" class="levelTitle_study">正在学</span>
                          <span v-else class="levelTitle_study">去学习</span>
                        </template>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { Image } from 'yj-mob-ui';
export default {
  components: {
    [Image.name]: Image
  },
  props: {
    currentId: {
      type: String
    }
  },
  watch: {
    treeData: {
      handler (val, oldVal) {
        this.openIds = [];
        this.getAllOpenIds(this.data);
        this.data = this.convertTree(val.childList, 0);
      },
      immediate: true
    },
    currentId (val) {
      this.activeCatalogue = val;
      if (this.firstOpen) { // 第一次打开的时候,默认打开上次学习的目录.之后的操作不再执行
        this.getParentIds(this.currentId, this.data);
        this.firstOpen = false;
      }
    }
  },
  data () {
    return {
      openIds: [], // 上次展开的节点ids
      firstOpen: true,
      treeData: {},
      type: '1',
      data: [],
      isOpen: false,
      activeCatalogue: '',
      circle: require('@/assets/images/lession/circle.png'),
      openIcon: require('@/assets/images/lession/icon-fold@3x.png'),
      unOpenIcon: require('@/assets/images/lession/icon_unfold@3x.png')
    };
  },
  mounted () {
    this.getParentIds(this.currentId, this.data);
  },
  methods: {
    toggle () {
      if (this.isFolder) {
        this.isOpen = !this.isOpen;
      }
    },
    makeFolder (item) {
      item.isOpen = !item.isOpen;
      this.$nextTick(() => {
        this.$emit('onParentSelect', item);
      });
    },
    isFolder (item) {
      return item.children && item.children.length;
    },
    onSelectItem (item) {
      if (!item.children || item.children.length <= 0 || item.level === 2) { // 不存在子目录 点击该条信息去学习
        this.$emit('onSelect', item);
      } else { // 存在子目录 点击信息 展开或收起
        this.makeFolder(item);
      }
      this.activeCatalogue = item.id;
    },
    getMoreTreeData (data, newTree) {
      for (let i = 0; i < data.length; i++) {
        newTree.push(data[i]);
        if (data[i].children && data[i].children.length) {
          this.getMoreTreeData(data[i].children, newTree);
        }
      }
      return newTree;
    },
    getAllOpenIds (data) {
      data.map((item) => {
        if (item.isOpen) {
          this.openIds.push(item.id);
        }
        if (item.childList) {
          this.getAllOpenIds(item.childList);
        }
      });
    },
    convertTree (data, level) {
      if (!data) {
        return [];
      }
      return data.map((item) => {
        if (item.childList || item.children) {
          this.type = '2';
        }
        return {
          ...item,
          children: this.convertTree(item.childList, level + 1),
          label: item.name,
          isOpen: this.openIds.includes(item.id),
          level: level,
          hasChild: item.childList && item.childList.length > 0
        };
      });
    },
    // 查询当前 节点的 默认第一个节点
    getParentIds (id, data) {
      function dfs (data, id, parents) {
        for (var i = 0; i < data.length; i++) {
          var item = data[i];
          if (item.id === id) {
            item.isOpen = true;
            return parents;
          } else {
            item.isOpen = false;
          }
          if (!item.children || !item.children.length) {
            continue;
          }
          parents.push(item.id);
          if (dfs(item.children, id, parents).length) {
            item.isOpen = true;
            return parents;
          } else {
            item.isOpen = false;
          }
          parents.pop();
        }
        return [];
      }
      return dfs(data, id, []);
    }
  }
};
</script>

<style lang="scss">
.les-cata {
  height: calc(60vh - 50px);
  overflow: auto;
  padding: 0 15px;
  padding-top: 2px;
  .level_1,
  .level_2 {
    padding: 0;
  }
  .level_2_title {
    display: flex;
    position: relative;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Medium, sans-serif;
    font-weight: 700;
    // margin-left: 14px;
    text-align: left;
    flex: 1 ;
    color: rgba(0, 0, 0, 0.85);
    line-height: 24px;
    margin-left: 10px;
    .lev1-text{
      word-break: break-all;
      display: inline-block;
      width: calc(100% - 20px);
    }
  }
  .levelTitle_study {
    background: white;
    color: #62BD81;
    border: 1px solid #62BD81;
    &.activebutton{
      background: #62BD81;
      border-radius: 15px 15px 15px 15px;
      border: 1px solid #62BD81;
      color: #ffffff;
    }
  }
  .studyContainer{
    width: 58px;
    height: 24px;
    background: transparent;
  }
  .study {
    width: 58px;
    height: 24px;
    // line-height: 1;
    border-radius: 15px;
    font-size: 12px;
    font-family: PingFang SC, PingFang SC-Regular, sans-serif;
    font-weight: 400;
    text-align: center;
    color: #29c07b;
    display: flex;
    align-items: center;
    justify-content: center;
    // 当前选择按钮的样式
    &.active-wrap{
      .levelTitle_study, .underway, .complete{
        background: #62BD81;
        border-radius: 15px 15px 15px 15px;
        border: 1px solid #62BD81;
        color: #ffffff;
      }
    }
    // 100% 的时候样式
    .complete {
      background: rgba(0, 0, 0, 0.05);
      border-radius: 15px 15px 15px 15px;
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC, sans-serif;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.3);
    }
    .underway {
      width: 60px;
      height: 24px;
      // background: rgba(86,207,151, 0.2);
      border-radius: 15px 15px 15px 15px;
      opacity: 1;
      border: 1px solid #62BD81;
    }
    .levelTitle_study, .underway, .complete  {
      width: 58px;
      height: 24px;
      // line-height: 1;
      // background: #62BD81;
      border-radius: 15px;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular, sans-serif;
      font-weight: 400;
      text-align: center;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
  .subsubTitle {
    display: flex;
    flex: 1;
    font-size: 13px;
    font-family: PingFang SC, PingFang SC-Regular, sans-serif;
    font-weight: 400;
    text-align: left;
    color: rgba(0, 0, 0, 0.85);
    // line-height: 26px;
    line-height: 1;
    margin-left: 10px;
    height: 100%;
    align-items: center;
    .lev1-text{
      display: inline-block;
      width: calc(100% - 20px);
      word-break: break-all;
    }
  }
  .sub-content {
    // padding: 0 15px 0 40px;
    background: #ffffff;
    border-radius: 8px;
    .sub-content-item{
      display: flex;
      height: 46px;
      align-items: center;
      justify-content: space-around;
      .header-icon{
        .foldericon{
          width: 12Px;
          height: 12Px;
        }
      }
      .study{
        position: relative;
        height: 24px;
      }
    }
  }
  .sub-sub-content {
    .sub-sub-content-item{
      display: flex;
      height: 46px;
      align-items: center;
      justify-content: space-between;
      .study{
        position: relative;
        height: 24px;
      }
    }
  }
  .title {
    position: relative;
    font-size: 16px;
    font-family: PingFang SC, PingFang SC-Regular, sans-serif;
    font-weight: 400;
    text-align: left;
    color: rgba(0, 0, 0, 0.85);
    line-height: 26px;
  }
  .subTitle {
    flex: 1;
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Regular, sans-serif;
    font-weight: 400;
    text-align: left;
    color: rgba(0, 0, 0, 0.85);
    line-height: 1;
    margin-left: 10px;
    display: flex;
    align-items: center;
    height: 100%;
    .lev1-text{
      word-break: break-all;
      display: inline-block;
      width: calc(100% - 20px);
    }
  }
  .cata-header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 46px;
    opacity: 1;
    .header-icon {
      .foldericon{
        width: 15Px;
        height: 15Px;
      }
    }
    .study{
      position: relative;
      height: 24px;
      // line-height: 1;
    }
  }
  .van-image {
    width: 100%;
    height: 100%;
    vertical-align: super;
  }
  .active {
    color: rgba(41,192,123,1);
  }
  .big-circle{
    // display: inline-block;
    height: 13Px;
    width: 13Px;
    // background-color: #29C07B;
    // border-radius: 50%;
    // transform: scale(0.5);
  }
  .middle-circle{
    // display: inline-block;
    height: 9Px;
    width: 9Px;
    // transform: scale(0.5)
  }
  .small-circle{
    display: inline-block;
    height: 5Px;
    width: 5Px;
    // background-color: #29C07B;
    // border-radius: 50%;
    // transform: scale(0.5)
  }
  .header-icon{
    display: flex;
    position: relative;
    line-height: 1;
    width: 19Px;
    height: 18Px;
    justify-content: center;
    align-items: center;
  }
//  @media (-webkit-device-pixel-ratio: 2), (device-pixel-ratio: 2) {
//       .cross-line{
//           -webkit-transform: scaleX(.5);
//           transform: scaleX(.5);
//       }
//   }
// @media (-webkit-device-pixel-ratio: 1.5),(device-pixel-ratio: 1.5) {
//       .cross-line{
//           -webkit-transform: scaleX(0.7);
//           transform: scaleX(0.7);
//       }
//     }
  .cross-line{
    width: 1Px;
    height: calc(100% - 46px);
    position: absolute;
    top: 23px;
    left: 9Px;
    background-image: linear-gradient(to bottom, #e0e4e2 0%, #e0e4e2 50%, transparent 50%);
    background-size: 8Px 10Px;
    background-repeat: repeat-y;
  }
}
</style>
